<template>
<div id="ball_together">
  <NavBar>
     <div slot="left" class="left" @click="return_before"><van-icon name="arrow-left" /></div>

    <div slot="center">创建活动</div>
    <div slot="right"><span class="right" @click="next_step" v-if="active<1">下一步</span>
    <span class="right_or" v-else @click="add_activity">确定</span></div>
  </NavBar>
  <div>
<van-steps :active="active">
  <van-step>基本信息</van-step>
  <van-step>其他信息</van-step>

</van-steps>
  </div>
  <div class="info" v-if="active===0">
    <van-cell-group class="info_box">
  <van-field v-model="name" label="活动名称" placeholder="请输入活动名称"  required/>
<!--        <van-field v-model="begin_time" label="比赛开始时间" placeholder="请输入活动名"  required/>-->
      <van-cell title="活动时间" is-link @click="timechoice" :value="currentDate.toLocaleString()"/>
</van-cell-group>
      <van-datetime-picker :filter="filter"
  v-model="currentDate"
  type="datetime"
  title="选择完整时间"
  :min-date="minDate"
  :max-date="maxDate"
  v-show="timeshow"
  @confirm="timebegin()"
  @cancel="canceltime()"
/>
          <van-cell title="报名截止时间" is-link :value="currentDate2.toLocaleString()" @click="timechoice2" />
          <van-datetime-picker :filter="filter"
  v-model="currentDate2"
  type="datetime"
  title="选择完整时间"
  :min-date="minDate"
  :max-date="maxDate"
  v-show="timeshow2"
  @confirm="timebegin2"
  @cancel="canceltime2"
/>
     <van-field
  readonly
  clickable
  label="地点"
  :value="value"
  placeholder="选择地点"
  @click="showPicker = true"
  v-show="siteindex!==5"
  class="site"
/>
<van-popup v-model="showPicker" round position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</van-popup>
    <van-field v-model="value5" label="地点名称" placeholder="请输入地点" v-show="siteindex===5"  required/>
         <van-field
  readonly
  clickable
  label="项目"
  :value="value2"
  placeholder="选择项目"
  @click="showPicker2 = true"
/>
<van-popup v-model="showPicker2" round position="bottom">
  <van-picker
    show-toolbar
    :columns="columns2"
    @cancel="showPicker2 = false"
    @confirm="onConfirm2"
  />
</van-popup>
<van-field
    class="intro_text"
  v-model="introduce"
  rows="3"
  autosize
  label="活动介绍"
  type="textarea"
  placeholder="请输入活动介绍"
/>
  </div>
<div class="info" v-if="active===1">
<van-form validate-first @failed="onFailed" class="info_box2">
  <!-- 通过 pattern 进行正则校验 -->

  <van-field
    v-model="phone"
    label="手机号"
    name="手机号"
    placeholder="请输入手机号"
    error-message-align="right"
    :rules="[{ pattern, message: '手机号格式不正确' }]"
  />
  <van-field v-model="digit" type="digit" label="限制人数" />
   <van-field v-model="money" type="digit" label="活动收费" placeholder="此费用包括用球和其他费用" />
  <van-field v-model="level" placeholder="无" label="期望水平" />
       <van-field
  readonly
  clickable
  label="性别要求"
  :value="sex"
  placeholder="如：无"
  @click="showPicker3 = true"
/>
<van-popup v-model="showPicker3" round position="bottom">
  <van-picker
    show-toolbar
    :columns="columns3"
    @cancel="showPicker3 = false"
    @confirm="onConfirm3"
  />
</van-popup>
</van-form>
</div>
</div>
</template>

<script>

import {postactivity} from "@/network/School/school";
import NavBar from "@/components/common/NavBar/NavBar";
export default {
name: "Ball_Together",
  components: {NavBar},
  data(){
  return{
     pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|19[0|1|2|3|5|6|7|8|9])\d{8}$/,
    minDate: new Date(2020, 0, 1),
    maxDate: new Date(2025, 10, 1),
    currentDate: new Date(),
    currentDate2:new Date(),
    digit:'',
    sex:'',
    level:'',
    introduce:'',
    active:0,
    name:'',
    money:'',
    phone:'',
    timeshow:false,
    timeshow2:false,
    siteindex:0,
    place:'',
    value:'',
    showPicker: false,
    columns: ['校体育馆','校乒羽馆','校网球场', '校操场','校篮球场(含排球场)','其他'],
    value2:'',
    showPicker2:false,
    showPicker3:false,
    columns2: ['足球','篮球','羽毛球单打','羽毛球双打','网球','乒乓球','排球','跑步'],
    columns3: ['无','女生','男生'],
    itemindex:0,
    itemvalue:'',
    sexindex:0,
    value5:''
  }
  },
  methods:{
  add_activity(){
    if (this.siteindex!==5){
          postactivity(name=this.name,this.currentDate,this.currentDate2,
    this.value,this.digit,this.itemindex+1,this.introduce,this.level,this.phone,this.sexindex+1,this.money)
    .then(
        res=>{
         if(res.code===0){
           this.$toast({
             type:"success",
             message:'发布活动成功'
           },
           this.$router.push('/school'))
         }
         else {
           this.$toast({
             type:"fail",
             message:'发布活动失败，请检查填写信息是否完整'
           })
         }
        }
    )
    }
  else {

          postactivity(name=this.name,this.currentDate,this.currentDate2,
    this.value5,this.digit,this.itemindex+1,this.introduce,this.level,this.phone,this.sexindex+1,this.money)
    .then(
        res=>{
         if(res.code===0){
           this.$toast({
             type:"success",
             message:'发布活动成功'
           },
           this.$router.push('/school'))
         }
         else {
           this.$toast({
             type:"fail",
             message:'发布活动失败，请检查填写信息是否完整'
           })
         }
        }
    )
    }
  },
      onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
   onConfirm(value,index) {
      this.value = value;
      this.showPicker = false;
     this.siteindex=index
   },
       onConfirm2(value,index) {
      this.value2 = value;
      this.showPicker2 = false;
     this.itemindex=index
   },
      onConfirm3(value,index) {
      this.sex = value;
      this.showPicker3 = false;
     this.sexindex=index
   },
  timechoice(){
    this.timeshow=true
  },
     timechoice2(){
    this.timeshow2=true
  },
  canceltime(){
    this.timeshow=false
  },
      canceltime2(){
    this.timeshow2=false
  },
   filter(type, options) {
      if (type === 'minute') {
        return options.filter((option) => option % 15 === 0);
      }
      return options;
    },
      return_before(){
      // this.$router.push('/school')
        if (this.active===0){this.$router.push('/school')}
        else {this.active=0}
    },
    next_step(){
        if (this.active<2){
          this.active+=1}

    },
    timebegin(){
     this.timeshow=false
    },
        timebegin2(){
     this.timeshow2=false
      // console.log(this.currentDate2);

    }
  },

  created() {
  this.$emit('header',false)
  },


}
</script>

<style scoped>
.left .van-icon {
    font-size: 20px;
    position: relative;
    top: 3px;
    left: -8px;
}
/deep/ .navbar{
  background-color: orange;
}
.right{
text-align: left;
}
/deep/ .van-cell--clickable{
  color: #646566;
}
/deep/ .van-field__control{
  text-align: right;
}
.site{
  margin-top: 30px;
}
#ball_together{
  height: 640px;
  background-color: #cccccc20;
}
.intro_text{
  margin-top: 30px;
}
.info_box{
  margin-top: 30px;
}
.info_box2{
  margin-top: 30px;
  padding: 10px 0px;
}
</style>